<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-07-06 19:44:13
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-07-06 21:11:44
 * @FilePath: \react\canvasLearn\clock.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>

        function amition() {

            //获取当前时间

            console.log('1');
            const now = new Date()

            const sec = now.getSeconds()
            const min = now.getMinutes()
            let hr = now.getHours()
            hr = hr > 12 ? hr-12 : hr
            /** @type {HTMLCanvasElement} */
            const ctx = document.getElementById('canvas').getContext("2d")
            // 保证下一帧的状态
            ctx.save()
            ctx.clearRect(0, 0, 600, 600)

            ctx.translate(300, 300)
            ctx.rotate(-Math.PI / 2)

            ctx.strokeStyle = "black"
            ctx.lineWidth = '5'
            ctx.lineCap = "round"
            ctx.save()
            for (let i = 0; i < 12; i++) {
                ctx.beginPath()
                ctx.rotate(Math.PI / 6)
                ctx.moveTo(100,0)
                ctx.lineTo(120,0)
                ctx.stroke()
            }
            ctx.restore()
            //分
            ctx.save()
            ctx.lineWidth = '3'
            for (let i = 0; i < 60; i++) {
                ctx.beginPath()
                ctx.rotate(Math.PI / 30)
                ctx.moveTo(110,0)
                ctx.lineTo(120,0)
                ctx.stroke()
            }
            ctx.restore()

            ctx.save()
            // 指针 时针
            ctx.rotate(
                hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec
            )
            ctx.lineWidth = '14'
            ctx.beginPath()
            ctx.moveTo(-20,0)
            ctx.lineTo(70,0)
            ctx.stroke()
            ctx.restore()

            ctx.save()
            // 指针 分针
            ctx.rotate(
                (Math.PI / 30) * min + (Math.PI / 1800) * sec 
            )
            ctx.lineWidth = '10'
            ctx.strokeStyle = "green"
            ctx.fillStyle = "green"
            ctx.beginPath()
            ctx.moveTo(-28,0)
            ctx.lineTo(90,0)
            ctx.stroke()
            ctx.restore()

            ctx.save()
            // 指针 秒针
            ctx.rotate((Math.PI / 30) * sec )
            ctx.lineWidth = '6'
            ctx.strokeStyle = "blue"
            ctx.fillStyle = "blue"
            ctx.beginPath()
            ctx.moveTo(-30,0)
            ctx.lineTo(95,0)
            ctx.stroke()
            ctx.beginPath()
            ctx.arc(0,0,10,0,Math.PI * 2,true)
            ctx.fill()
            ctx.restore()

            ctx.restore()
            window.requestAnimationFrame(amition)
        }

        window.requestAnimationFrame(amition)


    </script>
</body>

</html>